<template>
  <div class="hello">
    <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="300" height="200" :poster="bgImg" data-setup='{"autoplay":true}'>
      <source :src="source" type="rtmp/flv">
    </video>
  </div>
</template>

<script>
// 引入videojs 避免在全局使用 耗费性能 这里我封装成公共组件 
import videojs from 'video.js'
export default {
  name: 'hello',
  data () {
    return {
      bgImg: ''
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  props: {
    source: {
      type: String,
      required: true
    }
  },
  methods: {
    // 默认加载播放
    startPlay (id) {
      videojs('example_video_1',{}, function onPlayerReady(){
         this.play()
      })
    }
  }
}

    
</script>

<style>
/* 隐藏video默认的播放按钮 */
.vjs-default-skin .vjs-big-play-button { 
  display: none;
}
.vjs-control-bar {
  display: none;
}

</style>
